<template>
    <div>
        <div class="icon_box flex_al_center">
            <div class="icon_item">
                <div class="text-center">
                    <v-icon>mdi-square-edit-outline</v-icon>
                    <div>mdi-square-edit-outline</div>
                </div>
            </div>

            <div class="icon_item">
                <div class="text-center">
                    <v-icon>mdi-eye</v-icon>
                    <div>mdi-eye</div>
                </div>
            </div>

            <div class="icon_item">
                <div class="text-center">
                    <v-icon>mdi-trash-can</v-icon>
                    <div>mdi-trash-can</div>
                </div>
            </div>
        </div>


        <div class="code_box">
<pre v-highlight>
<code>
    &lt;v-icon&gt;
        mdi-square-edit-outline
    &lt;/v-icon&gt;

    &lt;v-icon&gt;
        mdi-eye
    &lt;/v-icon&gt;

    &lt;v-icon&gt;
        mdi-trash-can
    &lt;/v-icon&gt;
</code>
</pre>
        </div>
    </div>
</template>

<script>
    export default {
        name: "v-tip-icon",
        data () {
            return {

            }
        }
    }
</script>

<style scoped src="../style.css"></style>
